<template>
  <div
    class="tablePageWarp"
    style="padding:0"
  >
    <h4 class="withVerticleLineT4 title14">{{ $t('yglcx') }}</h4>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      class="h100"
      :scrollX="900"
    >
      <template
        slot-scope="text"
        v-for="column in columns.filter(item => !item.special)"
        :slot="column.scopedSlots.customRender">
        <table-ellipsis :text="text||'_'" :key="column.dataIndex"></table-ellipsis>
      </template>
      <template
        slot="saleState"
        slot-scope="text"
      >
        <table-ellipsis :text="saleStateTypeObj[text]"></table-ellipsis>
      </template>
      <template
        slot="yesNoType"
        slot-scope="text"
      >
        <table-ellipsis :text="chooseYesNoTypeObj[text]"></table-ellipsis>
      </template>
      <span
        slot="action"
        slot-scope="text,record"
        class="tableOperateSty"
      >
        <operation-menu
          :menus="tbRowMenus"
          @clickaction="(key)=>{
            doAction(key,record)
          }"
        ></operation-menu>
        <!-- <a @click="handleVersionDepend(record)">{{ $t('view') }}</a> -->
      </span>
    </s-table>
    <service-Version-depend :serviceId="id" :modelId="modelId" ref="versionDependRef">

    </service-Version-depend>
    <!-- 查看供应商 -->
    <supplier-view-modal
      :supplierList="supplierList"
      ref="supplierRef"
    ></supplier-view-modal>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import ServiceVersionDepend from '@/views/components/ServiceVersionDepend.vue'
import SupplierViewModal from '@/views/components/SupplierViewModal.vue'
import { mapState } from 'vuex'
import { STable } from '@/components'
import { serviceDetailRelativeModelColumns } from '../configConst'
import OperationMenu from '@/components/OperationMenu'

export default {
  name: 'ServiceDetailRelativeModel',
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  components: {
    TableEllipsis,
    STable,
    ServiceVersionDepend,
    SupplierViewModal,
    OperationMenu
  },
  data () {
    return {
      columns: serviceDetailRelativeModelColumns,
      // 查询参数
      queryParam: {},
      supplierList: [],
      modelId:''
    }
  },
  computed: {
    ...mapState({
      instantUpdateTime: (state) => state.app.instantUpdateTime
    }),
    chooseYesNoTypeObj () {
      return this.$store.getters.chooseYesNoTypeObj()
    },
    saleStateTypeObj () {
      return this.$store.getters.saleStateTypeObj()
    },
    tbRowMenus () {
      const rowMenu = [
        // {
        //   // 版本依赖
        //   title: this.$t('versionDepend'),
        //   key: 'handleVersionDepend'
        // },
        {
          // 供应商
          title: this.$t('supplier'),
          key: 'handleSupplier'
        }
      ]
      return rowMenu
    }
  },
  methods: {
    loadData (parameter) {
      const vm = this
      // 如果是全部则不传值给后端
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParam))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      JnqueryParam.serviceId = vm.id
      return vm.$api.getModelByService({ ...parameter, ...JnqueryParam })
    },
    refreshData (bool = false) {
      this.$refs.table.refresh(bool)
    },
    // 列表操作
    doAction (key, record) {
      const vm = this
      vm[key](record)
    },
    handleVersionDepend (record) {
      this.modelId=record.modelId
      this.$refs.versionDependRef.visible = true
    },
    handleSupplier (record) {
      this.supplierList = record.supplierList
      this.$refs.supplierRef.visible = true
    }
  },
  watch: {
    // 重新请求数据
    instantUpdateTime () {
      this.refreshData()
    }
  }
}
</script>
